<template>
  <div>
    <el-divider class="el-divider-specail" content-position="left"
      ><span>{{ dataList.EquipInfo }}</span>
    </el-divider>
    <el-table
      :data="[formData.deviceDto]"
      element-loading-text="Loading"
      fit
      highlight-current-row
    >
      >
      <el-table-column :label="dataList.DeviceNumber">
        <template slot-scope="scope">
          {{ scope.row.num }}
        </template>
      </el-table-column>
      <el-table-column
        :label="
          $i18n.locale === 'en' ? dataList.DeviceEName : dataList.DeviceName
        "
      >
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column :label="dataList.DeviceSpecifications">
        <template slot-scope="scope">
          {{ scope.row.specifications }}
        </template>
      </el-table-column>
      <el-table-column :label="dataList.DeviceStatus">
        <template slot-scope="scope">
          {{ scope.row.statusName }}
        </template>
      </el-table-column>
      <el-table-column
        :label="
          $i18n.locale === 'en'
            ? dataList.eDeviceStorageAddress
            : dataList.DeviceStorageAddress
        "
      >
        <template slot-scope="scope">
          {{ scope.row.storageAddress }}
        </template>
      </el-table-column>
      <el-table-column :label="dataList.DevicePersonResponsibleId">
        <template slot-scope="scope">
          {{ scope.row.personResponsibleName }}
        </template>
      </el-table-column>
    </el-table>
    <el-divider class="el-divider-specail" content-position="left"
      ><span>{{ dataList.InspectionPlan }}</span>
    </el-divider>
    <el-table
      :data="[formData]"
      element-loading-text="Loading"
      fit
      highlight-current-row
    >
      <el-table-column :label="dataList.InspectionTarget">
        <template slot-scope="scope">
          {{ scope.row.verificationObject }}
        </template>
      </el-table-column>
      <el-table-column :label="dataList.InspectionMethod">
        <template slot-scope="scope">
          {{ scope.row.verificationWay }}
        </template>
      </el-table-column>
      <el-table-column :label="dataList.InspectionProcedure">
        <template slot-scope="scope">
          {{ scope.row.verificationMethod }}
        </template>
      </el-table-column>
    </el-table>

    <el-divider class="el-divider-specail" content-position="left"
      ><span>{{ dataList.InspectionRecord }}</span>
    </el-divider>
    <el-descriptions class="margin-top" :column="5" :size="size" border>
      <el-descriptions-item :label="dataList.Inspector" :span="5">
        {{ formData.verPerson.name }}
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.InspectionTime" :span="5">
        {{ formatTime(formData.verificationDate) }}
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.RecordedContent" :span="5">
        <template>
          <div v-html="formData.content"></div>
        </template>
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.DeviceImg" :span="5">
        <div style="display: flex; flex-direction: row">
          <div
            v-for="item in formData.sysBusinessImgWarehouseList"
            :key="item"
            style="
              margin-left: 10px;
              display: flex;
              flex-direction: column;
              justify-content: center;
            "
          >
            <el-image
              :src="getUrl(item.filePath)"
              :fit="fit"
              :preview-src-list="[getUrl(item.filePath)]"
              style="width: 100px; height: 70px"
            ></el-image>
          </div>
        </div>
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.DeviceAnnex" :span="5">
        <el-table
          :data="formData.sysBusinessFileWarehouseList"
          style="width: 100%"
        >
          <el-table-column :label="dataList.Number" type="index" width="50">
          </el-table-column>
          <el-table-column
            prop="originalFileName"
            :label="dataList.DeviceoriginalFileName"
          >
          </el-table-column>
          <el-table-column prop="name" :label="dataList.Operation">
            <template slot-scope="scope">
              <el-link type="primary" @click="download(scope.row)">{{
                btn.Download
              }}</el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-descriptions-item>
    </el-descriptions>
    <el-divider class="el-divider-specail" content-position="left"
      ><span>{{ dataList.InspectionResult2 }}</span>
    </el-divider>
    <el-descriptions class="margin-top" :column="1" :size="size" border>
      <el-descriptions-item
        :label="dataList.InspectionCon"
        :label-style="{ width: '150px' }"
      >
        {{ formData.conclusionName }}
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.ConclusionReason">
        {{ formData.conclusionReason }}
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.EquipStatusAfterInspec">
        {{ formData.deviceStatusName }}
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.NextInspecTime">
        {{ formatTime(formData.nextCheckDate) }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import { getList } from "../../../api/DeviceVerificationTask.js";
// import { getBlob, saveAs } from "../../../utils/tool"
import { GetStaticFileInfo } from "@/api/Base";
import { mapGetters } from "vuex";
import { formatTime } from "../../../utils/time";
export default {
  name: "DeviceVerificationTaskView",
  components: {},
  props: {
    id: {
      type: String,
      default: "0",
    },
  },
  data() {
    return {
      list: [],
      size: "12px",
      listDeviceVerification: [],
      loading: false,
      innerDialogFormVisible: false,
      formLabelWidth: "120px",
      formData: {
        verificationPersonName: "",
        sysBusinessImgWarehouseList: [],
        sysBusinessFileWarehouseList: [],
        conclusion: "",
        conclusionReason: "",
        deviceStatusName: "",
        verificationDateNext: "",
      },
    };
  },
  computed: {
    ...mapGetters(["fileDomain", "fileBucket"]),
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  watch: {},
  created() {
    this.initData();
  },
  methods: {
    formatTime,
    // 打印
    initData() {
      this.loading = true;
      getList({ id: this.id })
        .then((res) => {
          if (res.data.dataList != null && res.data.dataList.length > 0) {
            this.formData = res.data.dataList[0];
          }

          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    getUrl(url) {
      // var res = `${this.$baseProtocol}//${this.fileDomain}/${this.fileBucket}/${url}`;
      var res = `${url}`;
      return res;
    },
    download(row) {
      // var fileUrl = `${this.$baseProtocol}//${this.fileDomain}/${this.fileBucket}/${row.filePath}`;
      var fileUrl = `${row.filePath}`;
      GetStaticFileInfo(fileUrl);
      // getBlob(fileUrl).then((blob) => {
      //   saveAs(blob, row.originalFileName);
      // });
    },
  },
};
</script>
